<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Destry - Fashion eCommerce HTML Template</title>
    <!-- Favicons -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <link rel="stylesheet" href="assets/css/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" type="text/css" href="jqueryChat/font_Icon/iconfont.css">
    <link rel="stylesheet" type="text/css" href="jqueryChat/css/chat.css">
    <link rel="stylesheet" href="assets/css/zySearch.css" />
    <script src="assets/js/template-web.js"></script>


</head>

<body>
<div>
    <div class="header section">


        <!-- Header Top End -->

        <!-- Header Bottom Start -->
        <div class="header-bottom">
            <div class="header-sticky">
                <div class="container">
                    <div class="row align-items-center">

                        <!-- Header Logo Start -->
                        <div class="col-xl-2 col-6">
                            <div class="header-logo">
                                <a href="index.html"><img width="105"  src="assets/images/logo/log.png" alt="Site Logo" /></a>
                            </div>
                        </div>
                        <!-- Header Logo End -->

                        <!-- 头部 -->
                        <div class="col-xl-8 d-none d-xl-block" id="header">
                            <div class="main-menu position-relative">
                                <ul>

                                    <li class="has-children">
                                        <a href="index.html"><span>首页</span></a>
                                    </li>
                                    <li class="has-children position-static">
                                        <a href="about.html"><span>公司简介</span></a>
                                    </li>
                                    <li class="has-children">
                                        <a href="#"><span>婚纱套系</span> <i class="fa fa-angle-down"></i></a>

                                        <ul class="sub-menu" id="wedding_dress_l">
                                        </ul>
                                    </li>
                                    <li class="has-children">
                                        <a href="#"><span>金牌团队</span> <i class="fa fa-angle-down"></i></a>
                                        <ul class="sub-menu" id="team">
                                        </ul>
                                    </li>
                                    <li class="has-children">
                                        <a href="#"><span>作品展示</span> <i class="fa fa-angle-down"></i></a>
                                        <ul class="sub-menu" id="work_show">

                                        </ul>
                                    </li>
                                    <li><a href="message.html"> <span>热点咨询</span></a></li>
                                    <li><a href="wishlist.html"> <span>预约</span></a></li>
                                </ul>
                            </div>



                        </div>
                        <!-- Header Menu End -->

                        <!-- Header Action Start -->
                        <div class="col-xl-2 col-6" id="right-header">

                        </div>
                        <!-- Header Action End -->

                    </div>
                </div>
            </div>
        </div>
        <!-- Header Bottom End -->

        <!-- Mobile Menu Start -->
        <div class="mobile-menu-wrapper">
            <div class="offcanvas-overlay"></div>

            <!-- Mobile Menu Inner Start -->
            <div class="mobile-menu-inner">

                <!-- Button Close Start -->
                <div class="offcanvas-btn-close">
                    <i class="pe-7s-close"></i>
                </div>
                <!-- Button Close End -->

                <!-- Mobile Menu Start -->
                <div class="mobile-navigation">
                    <nav>
                        <ul class="mobile-menu">
                            <li class="has-children">
                                <a href="#">Home <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown">
                                    <li><a href="index.html">Home One</a></li>
                                    <li><a href="index-2.html">Home Two</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Shop <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="shop-grid.html">Shop Grid</a></li>
                                    <li><a href="shop-left-sidebar.html">Shop Left Sidebar</a></li>
                                    <li><a href="shop-right-sidebar.html">Shop Right Sidebar</a></li>
                                    <li><a href="shop-list-fullwidth.html">Shop List Fullwidth</a></li>
                                    <li><a href="shop-list-left-sidebar.html">Shop List Left Sidebar</a></li>
                                    <li><a href="shop-list-right-sidebar.html">Shop List Right Sidebar</a></li>
                                    <li><a href="wishlist.html">Wishlist</a></li>
                                    <li><a href="cart.html">Shopping Cart</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                    <li><a href="compare.html">Compare</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Product <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="single-product.html">Single Product</a></li>
                                    <li><a href="single-product-sale.html">Single Product Sale</a></li>
                                    <li><a href="single-product-group.html">Single Product Group</a></li>
                                    <li><a href="single-product-normal.html">Single Product Normal</a></li>
                                    <li><a href="single-product-affiliate.html">Single Product Affiliate</a></li>
                                    <li><a href="single-product-slider.html">Single Product Slider</a></li>
                                    <li><a href="single-product-gallery-left.html">Gallery Left</a></li>
                                    <li><a href="single-product-gallery-right.html">Gallery Right</a></li>
                                    <li><a href="single-product-tab-style-left.html">Tab Style Left</a></li>
                                    <li><a href="single-product-tab-style-right.html">Tab Style Right</a></li>
                                    <li><a href="single-product-sticky-left.html">Sticky Left</a></li>
                                    <li><a href="single-product-sticky-right.html">Sticky Right</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="about.html">About Us</a></li>
                                    <li><a href="contact.html">Contact</a></li>
                                    <li><a href="faq.html">Faq</a></li>
                                    <li><a href="404-error.html">Error 404</a></li>
                                    <li><a href="my-account.html">My Account</a></li>
                                    <li><a href="login-register.html">Loging | Register</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Blog <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
                                    <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                    <li><a href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                                </ul>
                            </li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </nav>
                </div>
                <!-- Mobile Menu End -->

                <!-- Language, Currency & Link Start -->
                <div class="offcanvas-lag-curr mb-6">
                    <h2 class="title">Languages</h2>
                    <div class="header-top-lan-curr-link">
                        <div class="header-top-lan dropdown">
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">English <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right animate slideIndropdown">
                                <li><a class="dropdown-item" href="#">English</a></li>
                                <li><a class="dropdown-item" href="#">Japanese</a></li>
                                <li><a class="dropdown-item" href="#">Arabic</a></li>
                                <li><a class="dropdown-item" href="#">Romanian</a></li>
                            </ul>
                        </div>
                        <div class="header-top-curr dropdown">
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">USD <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right animate slideIndropdown">
                                <li><a class="dropdown-item" href="#">USD</a></li>
                                <li><a class="dropdown-item" href="#">Pound</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Language, Currency & Link End -->

                <!-- Contact Links/Social Links Start -->
                <div class="mt-auto">

                    <!-- Contact Links Start -->
                    <ul class="contact-links">
                        <li><i class="fa fa-phone"></i><a href="#"> +012 3456 789 123</a></li>
                        <li><i class="fa fa-envelope-o"></i><a href="#"> info@example.com</a></li>
                        <li><i class="fa fa-clock-o"></i> <span>Monday - Sunday 9.00 - 18.00</span> </li>
                    </ul>
                    <!-- Contact Links End -->

                    <!-- Social Widget Start -->
                    <div class="widget-social">
                        <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                        <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                        <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                        <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                        <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                    </div>
                    <!-- Social Widget Ende -->
                </div>
                <!-- Contact Links/Social Links End -->
            </div>
            <!-- Mobile Menu Inner End -->
        </div>
        <!-- Mobile Menu End -->

        <!-- Offcanvas Search Start -->
        <div class="offcanvas-search">
            <div class="offcanvas-search-inner">

                <!-- Button Close Start -->
                <div class="offcanvas-btn-close">
                    <i class="pe-7s-close"></i>
                </div>
                <!-- Button Close End -->

                <!-- Offcanvas Search Form Start -->
                <form class="offcanvas-search-form" action="#">
                    <input type="text" placeholder="Search Product..." class="offcanvas-search-input">
                </form>
                <!-- Offcanvas Search Form End -->

            </div>
        </div>
        <!-- Offcanvas Search End -->

        <!-- Cart Offcanvas Start -->
        <div class="cart-offcanvas-wrapper">
            <div class="offcanvas-overlay"></div>

            <!-- Cart Offcanvas Inner Start -->
            <div class="cart-offcanvas-inner">

                <!-- Button Close Start -->
                <div class="offcanvas-btn-close">
                    <i class="pe-7s-close"></i>
                </div>
                <!-- Button Close End -->

                <!-- Offcanvas Cart Content Start -->
                <div class="offcanvas-cart-content">
                    <!-- Offcanvas Cart Title Start -->
                    <h2 class="offcanvas-cart-title mb-10">Shopping Cart</h2>
                    <!-- Offcanvas Cart Title End -->

                    <!-- Cart Product/Price Start -->
                    <div class="cart-product-wrapper mb-6">

                        <!-- Single Cart Product Start -->
                        <div class="single-cart-product">
                            <div class="cart-product-thumb">
                                <a href="single-product.html"><img src="assets/images/products/small-product/1.jpg" alt="Cart Product"></a>
                            </div>
                            <div class="cart-product-content">
                                <h3 class="title"><a href="single-product.html">Brother Hoddies in Grey</a></h3>
                                <span class="price">
								<span class="new">$38.50</span>
                                <span class="old">$40.00</span>
                                </span>
                            </div>
                        </div>
                        <!-- Single Cart Product End -->

                        <!-- Product Remove Start -->
                        <div class="cart-product-remove">
                            <a href="#"><i class="fa fa-trash"></i></a>
                        </div>
                        <!-- Product Remove End -->

                    </div>
                    <!-- Cart Product/Price End -->

                    <!-- Cart Product/Price Start -->
                    <div class="cart-product-wrapper mb-6">

                        <!-- Single Cart Product Start -->
                        <div class="single-cart-product">
                            <div class="cart-product-thumb">
                                <a href="single-product.html"><img src="assets/images/products/small-product/2.jpg" alt="Cart Product"></a>
                            </div>
                            <div class="cart-product-content">
                                <h3 class="title"><a href="single-product.html">Basic Jogging Shorts</a></h3>
                                <span class="price">
								<span class="new">$14.50</span>
                                <span class="old">$18.00</span>
                                </span>
                            </div>
                        </div>
                        <!-- Single Cart Product End -->

                        <!-- Product Remove Start -->
                        <div class="cart-product-remove">
                            <a href="#"><i class="fa fa-trash"></i></a>
                        </div>
                        <!-- Product Remove End -->

                    </div>
                    <!-- Cart Product/Price End -->

                    <!-- Cart Product/Price Start -->
                    <div class="cart-product-wrapper mb-6">

                        <!-- Single Cart Product Start -->
                        <div class="single-cart-product">
                            <div class="cart-product-thumb">
                                <a href="single-product.html"><img src="assets/images/products/small-product/3.jpg" alt="Cart Product"></a>
                            </div>
                            <div class="cart-product-content">
                                <h3 class="title"><a href="single-product.html">Enjoy The Rest T-Shirt</a></h3>
                                <span class="price">
								<span class="new">$20.00</span>
                                <span class="old">$21.00</span>
                                </span>
                            </div>
                        </div>
                        <!-- Single Cart Product End -->

                        <!-- Product Remove Start -->
                        <div class="cart-product-remove">
                            <a href="#"><i class="fa fa-trash"></i></a>
                        </div>
                        <!-- Product Remove End -->

                    </div>
                    <!-- Cart Product/Price End -->

                    <!-- Cart Product Total Start -->
                    <div class="cart-product-total">
                        <span class="value">Subtotal</span>
                        <span class="price">220$</span>
                    </div>
                    <!-- Cart Product Total End -->

                    <!-- Cart Product Button Start -->
                    <div class="cart-product-btn mt-4">
                        <a href="cart.html" class="btn btn-dark btn-hover-primary rounded-0 w-100">View cart</a>
                        <a href="checkout.html" class="btn btn-dark btn-hover-primary rounded-0 w-100 mt-4">Checkout</a>
                    </div>
                    <!-- Cart Product Button End -->

                </div>
                <!-- Offcanvas Cart Content End -->

            </div>
            <!-- Cart Offcanvas Inner End -->
        </div>
        <!-- Cart Offcanvas End -->

    </div>

    <!--轮播图-->

    <div class="section">
        <div class="hero-slider">
            <div class="swiper-container">
                <div class="swiper-wrapper" id="luoboImage">
                </div>

                <div class="swiper-pagination d-md-none"></div>

                <div class="home-slider-prev swiper-button-prev main-slider-nav d-md-flex d-none"><i class="pe-7s-angle-left"></i></div>
                <div class="home-slider-next swiper-button-next main-slider-nav d-md-flex d-none"><i class="pe-7s-angle-right"></i></div>

            </div>
        </div>
    </div>



    <div class="section section-padding mt-0">
        <div style="height: 40px;width: 450px;margin: 0 auto;">
            <span class="zySearch" id="zySearch"></span>
        </div>
        <div class="container">
            <!-- Section Title & Tab Start -->
            <div class="row">

                <!-- Tab Start -->
                <div class="col-12">
                    <ul class="product-tab-nav nav justify-content-center mb-10 title-border-bottom mt-n3">
                        <li class="nav-item" data-aos="fade-up" data-aos-delay="300"><a class="nav-link active mt-3" data-bs-toggle="tab" href="#tab-product-all">婚纱套系</a></li>
                        <!--<li class="nav-item" data-aos="fade-up" data-aos-delay="400"><a class="nav-link mt-3" data-bs-toggle="tab" href="#tab-product-clothings">金牌团队</a></li>
                        <li class="nav-item" data-aos="fade-up" data-aos-delay="500"><a class="nav-link mt-3" data-bs-toggle="tab" href="#tab-product-all">作品展示</a></li>-->
                    </ul>
                </div>
                <!-- Tab End -->

            </div>
            <!-- Section Title & Tab End -->

            <!-- Products Tab Start -->
            <div class="row">
                <div class="col">
                    <div class="tab-content position-relative" >
                        <div class="tab-pane fade show active" id="tab-product-all">
                            <div class="product-carousel">
                                <div class="swiper-container" style="overflow: inherit;">

                                    <div class="swiper-wrapper mb-n10" id="hunshaSuit">

                                    <!--婚纱套系-->

                                    </div>


                                    <!-- Swiper Pagination Start -->
                                    <div class="swiper-pagination d-md-none"></div>
                                    <!-- Swiper Pagination End -->

                                    <!-- Next Previous Button Start -->
                                    <div class="swiper-product-button-next swiper-button-next swiper-button-white d-md-flex d-none" style="right: -20px;position: absolute" onclick="netPage()"><i class="pe-7s-angle-right"></i></div>
                                    <div class="swiper-product-button-prev swiper-button-prev swiper-button-white d-md-flex d-none" style="left: -20px;position: absolute" onclick="previousPage()"><i class="pe-7s-angle-left"></i></div>
                                    <!-- Next Previous Button End -->
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab-product-clothings">
                            <div class="product-carousel">
                                <div class="swiper-container">
                                    <div class="swiper-wrapper mb-n10">

                                        <!-- Product Start -->
                                        <div class="swiper-slide product-wrapper">

                                            <!-- Single Product Start -->
                                            <div class="product product-border-left mb-10">
                                                <div class="thumb">
                                                    <a href="single-product.html" class="image">
                                                        <img class="first-image" src="assets/images/products/medium-size/2.jpg" alt="Product" />
                                                        <img class="second-image" src="assets/images/products/medium-size/3.jpg" alt="Product" />
                                                    </a>
                                                    <div class="actions">
                                                        <a href="#" class="action wishlist"><i class="pe-7s-like"></i></a>
                                                        <a href="#" class="action quickview" data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><i class="pe-7s-search"></i></a>
                                                        <a href="#" class="action compare"><i class="pe-7s-shuffle"></i></a>
                                                    </div>
                                                </div>
                                                <div class="content">
                                                    <h4 class="sub-title"><a href="single-product.html">Studio Design</a></h4>
                                                    <h5 class="title"><a href="single-product.html">Basic Jogging Shorts</a></h5>
                                                    <span class="ratings">
															<span class="rating-wrap">
																<span class="star" style="width: 100%"></span>
                                                    </span>
                                                    <span class="rating-num">(4)</span>
                                                    </span>
                                                    <span class="price">
															<span class="new">$14.50</span>
                                                    <span class="old">$18.00</span>
                                                    </span>
                                                    <button class="btn btn-sm btn-outline-dark btn-hover-primary">Add To Cart</button>
                                                </div>
                                            </div>
                                            <!-- Single Product End -->

                                            <!-- Single Product Start -->
                                            <div class="product product-border-left mb-10">
                                                <div class="thumb">
                                                    <a href="single-product.html" class="image">
                                                        <img class="first-image" src="assets/images/products/medium-size/1.jpg" alt="Product" />
                                                        <img class="second-image" src="assets/images/products/medium-size/5.jpg" alt="Product" />
                                                    </a>
                                                    <div class="actions">
                                                        <a href="#" class="action wishlist"><i class="pe-7s-like"></i></a>
                                                        <a href="#" class="action quickview" data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><i class="pe-7s-search"></i></a>
                                                        <a href="#" class="action compare"><i class="pe-7s-shuffle"></i></a>
                                                    </div>
                                                </div>
                                                <div class="content">
                                                    <h4 class="sub-title"><a href="single-product.html">Studio Design</a></h4>
                                                    <h5 class="title"><a href="single-product.html">Brother Hoddies in Grey</a></h5>
                                                    <span class="ratings">
															<span class="rating-wrap">
																<span class="star" style="width: 100%"></span>
                                                    </span>
                                                    <span class="rating-num">(4)</span>
                                                    </span>
                                                    <span class="price">
															<span class="new">$38.50</span>
                                                    <span class="old">$42.85</span>
                                                    </span>
                                                    <button class="btn btn-sm btn-outline-dark btn-hover-primary">Add To Cart</button>
                                                </div>
                                            </div>
                                            <!-- Single Product End -->

                                        </div>
                                        <!-- Product End -->

                                        <!-- Product Start -->
                                        <div class="swiper-slide product-wrapper">

                                            <!-- Single Product Start -->
                                            <div class="product product-border-left mb-10">
                                                <div class="thumb">
                                                    <a href="single-product.html" class="image">
                                                        <img class="first-image" src="assets/images/products/medium-size/11.jpg" alt="Product" />
                                                        <img class="second-image" src="assets/images/products/medium-size/10.jpg" alt="Product" />
                                                    </a>
                                                    <div class="actions">
                                                        <a href="#" class="action wishlist"><i class="pe-7s-like"></i></a>
                                                        <a href="#" class="action quickview" data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><i class="pe-7s-search"></i></a>
                                                        <a href="#" class="action compare"><i class="pe-7s-shuffle"></i></a>
                                                    </div>
                                                </div>
                                                <div class="content">
                                                    <h4 class="sub-title"><a href="single-product.html">Design Source</a></h4>
                                                    <h5 class="title"><a href="single-product.html">Handmade Shoulder Bag</a></h5>
                                                    <span class="ratings">
															<span class="rating-wrap">
																<span class="star" style="width: 100%"></span>
                                                    </span>
                                                    <span class="rating-num">(06)</span>
                                                    </span>
                                                    <span class="price">
															<span class="new">$96.50</span>
                                                    <span class="old">$100.00</span>
                                                    </span>
                                                    <button class="btn btn-sm btn-outline-dark btn-hover-primary">Add To Cart</button>
                                                </div>
                                            </div>
                                            <!-- Single Product End -->

                                            <!-- Single Product Start -->
                                            <div class="product product-border-left mb-10">
                                                <div class="thumb">
                                                    <a href="single-product.html" class="image">
                                                        <img class="first-image" src="assets/images/products/medium-size/3.jpg" alt="Product" />
                                                        <img class="second-image" src="assets/images/products/medium-size/5.jpg" alt="Product" />
                                                    </a>
                                                    <div class="actions">
                                                        <a href="#" class="action wishlist"><i class="pe-7s-like"></i></a>
                                                        <a href="#" class="action quickview" data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><i class="pe-7s-search"></i></a>
                                                        <a href="#" class="action compare"><i class="pe-7s-shuffle"></i></a>
                                                    </div>
                                                </div>
                                                <div class="content">
                                                    <h4 class="sub-title"><a href="single-product.html">Studio Design</a></h4>
                                                    <h5 class="title"><a href="single-product.html">Enjoy The Rest T-Shirt</a></h5>
                                                    <span class="ratings">
															<span class="rating-wrap">
																<span class="star" style="width: 100%"></span>
                                                    </span>
                                                    <span class="rating-num">(4)</span>
                                                    </span>
                                                    <span class="price">
															<span class="new">$22.00</span>
                                                    </span>
                                                    <button class="btn btn-sm btn-outline-dark btn-hover-primary">Add To Cart</button>
                                                </div>
                                            </div>
                                            <!-- Single Product End -->

                                        </div>
                                        <!-- Product End -->

                                        <!-- Product Start -->
                                        <div class="swiper-slide product-wrapper">

                                            <!-- Single Product Start -->
                                            <div class="product product-border-left mb-10">
                                                <div class="thumb">
                                                    <a href="single-product.html" class="image">
                                                        <img class="first-image" src="assets/images/products/medium-size/4.jpg" alt="Product" />
                                                        <img class="second-image" src="assets/images/products/medium-size/10.jpg" alt="Product" />
                                                    </a>
                                                    <span class="badges">
															<span class="sale">New</span>
                                                    </span>
                                                    <div class="actions">
                                                        <a href="#" class="action wishlist"><i class="pe-7s-like"></i></a>
                                                        <a href="#" class="action quickview" data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><i class="pe-7s-search"></i></a>
                                                        <a href="#" class="action compare"><i class="pe-7s-shuffle"></i></a>
                                                    </div>
                                                </div>
                                                <div class="content">
                                                    <h4 class="sub-title"><a href="single-product.html">Studio Design</a></h4>
                                                    <h5 class="title"><a href="single-product.html">Simple Woven Fabrics</a></h5>
                                                    <span class="ratings">
															<span class="rating-wrap">
																<span class="star" style="width: 67%"></span>
                                                    </span>
                                                    <span class="rating-num">(2)</span>
                                                    </span>
                                                    <span class="price">
															<span class="new">$45.50</span>
                                                    <span class="old">$48.85</span>
                                                    </span>
                                                    <button class="btn btn-sm btn-outline-dark btn-hover-primary">Add To Cart</button>
                                                </div>
                                            </div>
                                            <!-- Single Product End -->

                                            <!-- Single Product Start -->
                                            <div class="product product-border-left mb-10">
                                                <div class="thumb">
                                                    <a href="single-product.html" class="image">
                                                        <img class="first-image" src="assets/images/products/medium-size/5.jpg" alt="Product" />
                                                        <img class="second-image" src="assets/images/products/medium-size/6.jpg" alt="Product" />
                                                    </a>
                                                    <span class="badges">
															<span class="sale">Sold</span>
                                                    </span>
                                                    <div class="actions">
                                                        <a href="#" class="action wishlist"><i class="pe-7s-like"></i></a>
                                                        <a href="#" class="action quickview" data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><i class="pe-7s-search"></i></a>
                                                        <a href="#" class="action compare"><i class="pe-7s-shuffle"></i></a>
                                                    </div>
                                                </div>
                                                <div class="content">
                                                    <h4 class="sub-title"><a href="single-product.html">Studio Design</a></h4>
                                                    <h5 class="title"><a href="single-product.html">Make Thing Happen T-Shirt</a></h5>
                                                    <span class="ratings">
															<span class="rating-wrap">
																<span class="star" style="width: 80%"></span>
                                                    </span>
                                                    <span class="rating-num">(2)</span>
                                                    </span>
                                                    <span class="price">
															<span class="new">$16.00</span>
                                                    <span class="old">$18.00</span>
                                                    </span>
                                                    <button class="btn btn-sm btn-outline-dark btn-hover-primary">Add To Cart</button>
                                                </div>
                                            </div>
                                            <!-- Single Product End -->

                                        </div>
                                        <!-- Product End -->

                                        <!-- Product Start -->
                                        <div class="swiper-slide product-wrapper">

                                            <!-- Single Product Start -->
                                            <div class="product product-border-left mb-10">
                                                <div class="thumb">
                                                    <a href="single-product.html" class="image">
                                                        <img class="first-image" src="assets/images/products/medium-size/7.jpg" alt="Product" />
                                                        <img class="second-image" src="assets/images/products/medium-size/9.jpg" alt="Product" />
                                                    </a>
                                                    <div class="actions">
                                                        <a href="#" class="action wishlist"><i class="pe-7s-like"></i></a>
                                                        <a href="#" class="action quickview" data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><i class="pe-7s-search"></i></a>
                                                        <a href="#" class="action compare"><i class="pe-7s-shuffle"></i></a>
                                                    </div>
                                                </div>
                                                <div class="content">
                                                    <h4 class="sub-title"><a href="single-product.html">Lather Design</a></h4>
                                                    <h5 class="title"><a href="single-product.html">Basic Lather Sneaker</a></h5>
                                                    <span class="ratings">
															<span class="rating-wrap">
																<span class="star" style="width: 100%"></span>
                                                    </span>
                                                    <span class="rating-num">(12)</span>
                                                    </span>
                                                    <span class="price">
															<span class="new">$65.00</span>
                                                    </span>
                                                    <button class="btn btn-sm btn-outline-dark btn-hover-primary">Add To Cart</button>
                                                </div>
                                            </div>
                                            <!-- Single Product End -->

                                            <!-- Single Product Start -->
                                            <div class="product product-border-left mb-10">
                                                <div class="thumb">
                                                    <a href="single-product.html" class="image">
                                                        <img class="first-image" src="assets/images/products/medium-size/10.jpg" alt="Product" />
                                                        <img class="second-image" src="assets/images/products/medium-size/4.jpg" alt="Product" />
                                                    </a>
                                                    <div class="actions">
                                                        <a href="#" class="action wishlist"><i class="pe-7s-like"></i></a>
                                                        <a href="#" class="action quickview" data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><i class="pe-7s-search"></i></a>
                                                        <a href="#" class="action compare"><i class="pe-7s-shuffle"></i></a>
                                                    </div>
                                                </div>
                                                <div class="content">
                                                    <h4 class="sub-title"><a href="single-product.html">Fabric Design</a></h4>
                                                    <h5 class="title"><a href="single-product.html">Simple Woven Fashion</a></h5>
                                                    <span class="ratings">
															<span class="rating-wrap">
																<span class="star" style="width: 70%"></span>
                                                    </span>
                                                    <span class="rating-num">(09)</span>
                                                    </span>
                                                    <span class="price">
															<span class="new">$27.00</span>
                                                    <span class="old">$29.50</span>
                                                    </span>
                                                    <button class="btn btn-sm btn-outline-dark btn-hover-primary">Add To Cart</button>
                                                </div>
                                            </div>
                                            <!-- Single Product End -->

                                        </div>
                                        <!-- Product End -->

                                    </div>

                                    <!-- Swiper Pagination Start -->
                                    <div class="swiper-pagination d-md-none"></div>
                                    <!-- Swiper Pagination End -->

                                    <!-- Next Previous Button Start -->
                                    <div class="swiper-product-button-next swiper-button-next swiper-button-white d-md-flex d-none"><i class="pe-7s-angle-right"></i></div>
                                    <div class="swiper-product-button-prev swiper-button-prev swiper-button-white d-md-flex d-none"><i class="pe-7s-angle-left"></i></div>
                                    <!-- Next Previous Button End -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Products Tab End -->
        </div>
    </div>
    <!-- Product Section End -->

    <!-- Banner Fullwidth Start -->
    <div class="section">
        <div class="container">
            <div class="row">
                <div class="col-12" data-aos="fade-up" data-aos-delay="300">

                </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Banner Fullwidth End -->






    <!-- Product List End -->


    <!-- 脚部 -->
    <footer class="section footer-section">

        <!-- Footer Top Start -->
        <div class="footer-top section-padding">
            <div class="container">
                <div class="row mb-n10">

                    <div class="col-12 col-sm-6 col-lg-2 col-xl-2 mb-10" data-aos="fade-up" data-aos-delay="300">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">友情链接</h2>
                            <ul class="widget-list">
                                <li><a href="http://www.milan520.com/">米兰婚纱摄影</a></li>
                                <li><a href="https://www.bj520.com/">伯爵旅拍</a></li>
                                <li><a href="http://lovesfy.shop.liebiao.com/">苏菲雅婚纱摄影</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Top End -->

        <!-- Footer Bottom Start -->
        <div class="footer-bottom">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 text-center">
                        <div class="copyright-content">
                            <p class="mb-0">Copyright © 2021 <a href="#">jq22</a> All Rights Reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer Section End -->

    <!-- Scroll Top Start -->
    <a href="#" class="scroll-top" id="scroll-top">
        <i class="arrow-top fa fa-long-arrow-up"></i>
        <i class="arrow-bottom fa fa-long-arrow-up"></i>
    </a>
    <!-- Scroll Top End -->


    <!-- Modal Start  -->
    <div class="modalquickview modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <button class="btn close" data-bs-dismiss="modal">×</button>
                <div class="row">
                    <div class="col-md-6 col-12">

                        <!-- Product Details Image Start -->
                        <div class="modal-product-carousel">

                            <!-- Single Product Image Start -->
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="assets/images/products/large-size/1.jpg" alt="Product">
                                    </a>
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="assets/images/products/large-size/2.jpg" alt="Product">
                                    </a>
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="assets/images/products/large-size/3.jpg" alt="Product">
                                    </a>
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="assets/images/products/large-size/4.jpg" alt="Product">
                                    </a>
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="assets/images/products/large-size/5.jpg" alt="Product">
                                    </a>
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="assets/images/products/large-size/6.jpg" alt="Product">
                                    </a>
                                </div>

                                <!-- Swiper Pagination Start -->
                                <!-- <div class="swiper-pagination d-md-none"></div> -->
                                <!-- Swiper Pagination End -->

                                <!-- Next Previous Button Start -->
                                <div class="swiper-product-button-next swiper-button-next"><i class="pe-7s-angle-right"></i></div>
                                <div class="swiper-product-button-prev swiper-button-prev"><i class="pe-7s-angle-left"></i></div>
                                <!-- Next Previous Button End -->
                            </div>
                            <!-- Single Product Image End -->

                        </div>
                        <!-- Product Details Image End -->

                    </div>
                    <div class="col-md-6 col-12 overflow-hidden position-relative">

                        <!-- Product Summery Start -->
                        <div class="product-summery">

                            <!-- Product Head Start -->
                            <div class="product-head mb-3">
                                <h2 class="product-title">Sample product</h2>
                            </div>
                            <!-- Product Head End -->

                            <!-- Price Box Start -->
                            <div class="price-box mb-2">
                                <span class="regular-price">$80.00</span>
                                <span class="old-price"><del>$90.00</del></span>
                            </div>
                            <!-- Price Box End -->

                            <!-- Rating Start -->
                            <span class="ratings justify-content-start">
                        <span class="rating-wrap">
                            <span class="star" style="width: 100%"></span>
                            </span>
                            <span class="rating-num">(4)</span>
                            </span>
                            <!-- Rating End -->

                            <!-- SKU Start -->
                            <div class="sku mb-3">
                                <span>SKU: 12345</span>
                            </div>
                            <!-- SKU End -->

                            <!-- Description Start -->
                            <p class="desc-content mb-5">I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
                            <!-- Description End -->

                            <!-- Product Meta Start -->
                            <div class="product-meta mb-3">
                                <!-- Product Size Start -->
                                <div class="product-size">
                                    <span>Size :</span>
                                    <a href=""><strong>S</strong></a>
                                    <a href=""><strong>M</strong></a>
                                    <a href=""><strong>L</strong></a>
                                    <a href=""><strong>XL</strong></a>
                                </div>
                                <!-- Product Size End -->
                            </div>
                            <!-- Product Meta End -->

                            <!-- Product Color Variation Start -->
                            <div class="product-color-variation mb-3">
                                <button type="button" class="btn bg-danger"></button>
                                <button type="button" class="btn bg-primary"></button>
                                <button type="button" class="btn bg-dark"></button>
                                <button type="button" class="btn bg-success"></button>
                            </div>
                            <!-- Product Color Variation End -->

                            <!-- Product Meta Start -->
                            <div class="product-meta mb-5">
                                <!-- Product Metarial Start -->
                                <div class="product-metarial">
                                    <span>Metarial :</span>
                                    <a href=""><strong>Metal</strong></a>
                                    <a href=""><strong>Resin</strong></a>
                                    <a href=""><strong>Lather</strong></a>
                                    <a href=""><strong>Polymer</strong></a>
                                </div>
                                <!-- Product Metarial End -->
                            </div>
                            <!-- Product Meta End -->

                            <!-- Quantity Start -->
                            <div class="quantity mb-5">
                                <div class="cart-plus-minus">
                                    <input class="cart-plus-minus-box" value="0" type="text">
                                    <div class="dec qtybutton"></div>
                                    <div class="inc qtybutton"></div>
                                </div>
                            </div>
                            <!-- Quantity End -->

                            <!-- Cart & Wishlist Button Start -->
                            <div class="cart-wishlist-btn pb-4 mb-n3">
                                <div class="add-to_cart mb-3">
                                    <a class="btn btn-outline-dark btn-hover-primary" href="cart.html">Add to cart</a>
                                </div>
                                <div class="add-to-wishlist mb-3">
                                    <a class="btn btn-outline-dark btn-hover-primary" href="wishlist.html">Add to Wishlist</a>
                                </div>
                            </div>
                            <!-- Cart & Wishlist Button End -->

                            <!-- Social Shear Start -->
                            <div class="social-share">
                                <span>Share :</span>
                                <a href="#"><i class="fa fa-facebook-square facebook-color"></i></a>
                                <a href="#"><i class="fa fa-twitter-square twitter-color"></i></a>
                                <a href="#"><i class="fa fa-linkedin-square linkedin-color"></i></a>
                                <a href="#"><i class="fa fa-pinterest-square pinterest-color"></i></a>
                            </div>
                            <!-- Social Shear End -->

                            <!-- Product Delivery Policy Start -->
                            <ul class="product-delivery-policy border-top pt-4 mt-4 border-bottom pb-4">
                                <li> <i class="fa fa-check-square"></i> <span>Security Policy (Edit With Customer Reassurance Module)</span></li>
                                <li><i class="fa fa-truck"></i><span>Delivery Policy (Edit With Customer Reassurance Module)</span></li>
                                <li><i class="fa fa-refresh"></i><span>Return Policy (Edit With Customer Reassurance Module)</span></li>
                            </ul>
                            <!-- Product Delivery Policy End -->

                        </div>
                        <!-- Product Summery End -->

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="chatContainer" style="z-index: 99999;">
    <div class="chatBtn">
        <i class="iconfont icon-xiaoxi1"></i>
    </div>
    <div class="chat-message-num">10</div>
    <div class="chatBox" ref="chatBox">
        <div class="chatBox-head">
            <div class="chatBox-head-one">
                Conversations
                <div class="chat-close" style="margin: 10px 10px 0 0;font-size: 14px">关闭</div>
            </div>
            <div class="chatBox-head-two">
                <!--<div class="chat-return">返回</div>-->
                <div class="chat-people">
                    <div class="ChatInfoHead">
                        <img src="img/userImage.jpg" alt="头像"/>
                    </div>
                    <div class="ChatInfoName">在线客服</div>
                </div>
                <div class="chat-close">关闭</div>
            </div>
        </div>
        <div class="chatBox-info">
            <div class="chatBox-kuang" ref="chatBoxkuang">
                <div class="chatBox-content">
                    <div class="chatBox-content-demo" id="chatBox-content-demo">



                    </div>
                </div>
                <div class="chatBox-send">
                    <div class="div-textarea" contenteditable="true"></div>
                    <div>
                        <button id="chat-biaoqing" class="btn-default-styles">
                            <i class="iconfont icon-biaoqing"></i>
                        </button>
                        <label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles">
                            <input type="file" onchange="selectImg(this)" accept="image/jpg,image/jpeg,image/png"
                                   name="file" id="inputImage" class="hidden">
                            <i class="iconfont icon-tuxiang"></i>
                        </label>
                        <button id="chat-fasong" class="btn-default-styles"><i class="iconfont icon-fasong"></i>
                        </button>
                    </div>
                    <div class="biaoqing-photo">
                        <ul>
                            <li><span class="emoji-picker-image" style="background-position: -9px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -9px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -9px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -9px -120px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -120px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -120px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -120px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -120px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -120px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -9px -154px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -154px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -154px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -154px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -154px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -154px;"></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script>



    <!--Main JS-->
    <script src="assets/js/main.js"></script>
<script src="config/config.js"></script>




<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function(){
        $("#right-header").load("right-header.html");
    });


    $(".chatBox").toggle(0);
    screenFuc();
    function screenFuc() {
        var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度
        //屏幕小于768px时候,布局change
        var winWidth = $(window).innerWidth();
        if (winWidth <= 768) {
            var totalHeight = $(window).height(); //页面整体高度
            $(".chatBox-info").css("height", totalHeight - topHeight);
            var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度
            //中间内容高度
            $(".chatBox-content").css("height", infoHeight - 46);
            $(".chatBox-content-demo").css("height", infoHeight - 46);

            $(".chatBox-list").css("height", totalHeight - topHeight);
            $(".chatBox-kuang").css("height", totalHeight - topHeight);
            $(".div-textarea").css("width", winWidth - 106);
        } else {
            $(".chatBox-info").css("height", 495);
            $(".chatBox-content").css("height", 448);
            $(".chatBox-content-demo").css("height", 448);
            $(".chatBox-list").css("height", 495);
            $(".chatBox-kuang").css("height", 495);
            $(".div-textarea").css("width", 260);
        }
    }
    (window.onresize = function () {
        screenFuc();
    })();
    //未读信息数量为空时
    var totalNum = $(".chat-message-num").html();
    if (totalNum == "") {
        $(".chat-message-num").css("padding", 0);
    }
    $(".message-num").each(function () {
        var wdNum = $(this).html();
        if (wdNum == "") {
            $(this).css("padding", 0);
        }
    });


    //打开/关闭聊天框
    $(".chatBtn").click(function () {
        $(".chatBox").toggle(10);
    })
    $(".chat-close").click(function () {
        $(".chatBox").toggle(10);
    })
    //进聊天页面
    var n = $(this).index();
    $(".chatBox-head-one").toggle();
    $(".chatBox-head-two").toggle();
    $(".chatBox-list").fadeToggle();
    $(".chatBox-kuang").fadeToggle();

    //传名字
    $(".ChatInfoName").text($(this).children(".chat-name").children("p").eq(0).html());

    //传头像
    $(".ChatInfoHead>img").attr("src", $(this).children().eq(0).children("img").attr("src"));

    //聊天框默认最底部
    $(document).ready(function () {
        $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
    });

    //返回列表
/*    $(".chat-return").click(function () {
        $(".chatBox-head-one").toggle(1);
        $(".chatBox-head-two").toggle(1);
        $(".chatBox-list").fadeToggle(1);
        $(".chatBox-kuang").fadeToggle(1);
    });*/

    //      发送信息
    let date = new Date()
    var dateTime = dateFormat("YYYY-mm-dd HH:MM", date)
    $("#chat-fasong").click(function () {
        var textContent = $(".div-textarea").html().replace(/[\n\r]/g, '<br>')
        //调用socket发送
        sendMessage(textContent);
        if (textContent != "") {
            $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                "<div class=\"author-name\"><small class=\"chat-date\">"+dateTime+"</small> </div> " +
                "<div class=\"right\"> <div class=\"chat-message\"> " + textContent + " </div> " +
                "<div class=\"chat-avatars\"><img src=\"img/userImage2.jpg\" alt=\"头像\" /></div> </div> </div>");
            //发送后清空输入框
            $(".div-textarea").html("");
            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
        }
    });

    function dateFormat(fmt, date) {
        let ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
        };
        return fmt;
    }

    //      发送表情
    $("#chat-biaoqing").click(function () {
        $(".biaoqing-photo").toggle();
    });
    $(document).click(function () {
        $(".biaoqing-photo").css("display", "none");
    });
    $("#chat-biaoqing").click(function (event) {
        event.stopPropagation();//阻止事件
    });

    $(".emoji-picker-image").each(function () {
        $(this).click(function () {
            var bq = $(this).parent().html();
            console.log(bq)
            $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                "<div class=\"author-name\"><small class=\"chat-date\">2017-12-02 14:26:58</small> </div> " +
                "<div class=\"right\"> <div class=\"chat-message\"> " + bq + " </div> " +
                "<div class=\"chat-avatars\"><img src=\"img/userImage.jpg\" alt=\"头像\" /></div> </div> </div>");
            //发送后关闭表情框
            $(".biaoqing-photo").toggle();
            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
        })
    });

    //      发送图片
    function selectImg(pic) {
        if (!pic.files || !pic.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var images = evt.target.result;
            $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                "<div class=\"author-name\"><small class=\"chat-date\">2017-12-02 14:26:58</small> </div> " +
                "<div class=\"right\"> <div class=\"chat-message\"><img src=" + images + "></div> " +
                "<div class=\"chat-avatars\"><img src=\"img/icon01.png\" alt=\"头像\" /></div> </div> </div>");
            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
        };
        reader.readAsDataURL(pic.files[0]);

    }




</script>


</body>
<!--轮播图-->
<script type="text/html" id="lunbo">
    {{each data as item i}}
    <div class="hero-slide-item swiper-slide swiper-slide-active">

        <!-- Hero Slider Bg Image Start -->
        <div class="hero-slide-bg">
            <img src="{{item}}" alt="Slider Image" />
        </div>
    </div>
    {{/each}}
</script>

<script type="text/html" id="hunsha">
    {{each data.rows as item i}}
    <div class="product product-border-left mb-10" data-aos="fade-up" data-aos-delay="300" style="width: 396px;height: 500px">
        <div class="thumb" style="width: 365px; height: 273px">
            <a href="single-product.html?id={{item.id}}" class="image" style="width: 365px;height: 273px">
                <img class="first-image" src="{{data.httpUrl}}{{item.coverImageOb[0]}}" style="width: 100%;height: 100%" alt="Product" />
                <img class="second-image" src="{{data.httpUrl}}{{item.coverImageOb[1]}}" style="width: 100%;height: 100%" alt="Product" alt="Product" />
            </a>
            <!--<div class="actions">
                <a href="#" class="action wishlist"><i class="pe-7s-like"></i></a>
                <a href="#" class="action quickview" data-bs-toggle="modal" data-bs-target="#exampleModalCenter"><i class="pe-7s-search"></i></a>
                <a href="#" class="action compare"><i class="pe-7s-shuffle"></i></a>
            </div>-->
        </div>
        <div class="content">
            <h4 class="sub-title"><a href="single-product.html"></a></h4>
            <h5 class="title"><a href="single-product.html">{{item.name}}</a></h5>
            <span class="ratings">

                                                    </span>
                                                    <span class="price">
															<span class="new">${{item.price}}</span>
                                                    </span>

        </div>
    </div>
    {{/each}}
</script>
<!--获取婚纱套系-->
<script type="text/html" id="wedding_dress">
    {{each data item i}}
    <li><a href="single-product.html?id={{item.id}}">{{item.name}}</a></li>
    {{/each}}
</script>

<script type="text/html" id="team_script">
    {{each data item i}}
    <li><a href="blog-details.html?id={{item.id}}">{{item.name}}</a></li>
    {{/each}}
</script>

<script type="text/html" id="work_show_script">
    {{each data item i}}
    <li><a href="show.html?id={{item.id}}">{{item.name}}</a></li>
    {{/each}}
</script>
<script>
    $(function () {
        findSlideshow();
        findSuit(1,3);
        getWeddingDress();
        getTeam();
        getWorkShow();

    });
    var currentPage = 1;
    var totalCount = 0;
    //获取轮播图
    function findSlideshow() {
        $.ajax({
            url:httpUrl+'/api/slideshow/0',
            type:'get',
            success:function (res) {
                console.log(res);
                var info = [];
                for(var i=0;i<res.data.imageListOb.length;i++){
                    info.push(httpUrl+res.data.imageListOb[i]);
                }
                var html = template('lunbo', {data:info});
                document.querySelector('#luoboImage').innerHTML = html
            }
        });
    }
    var contentKeyword = '';
    //获取婚纱套系
    function findSuit(pageNum,pageSize){
        $.ajax({
            url:httpUrl+'/api/suitManagementList?pageNum='+pageNum+'&pageSize='+pageSize+'&content='+contentKeyword,
            type:'get',
            success:function (res) {
                console.log(res);
                totalCount = res.total;
                if(res.rows.size<=0){
                    return;
                }
                res.httpUrl = httpUrl;
                var html = template('hunsha', {data:res});
                document.querySelector('#hunshaSuit').innerHTML = html

            }
        });
    }
    //上一页
    function previousPage() {
        if(currentPage <= 1){
            return;
        }else{
            currentPage = currentPage-1;
        }

        findSuit(currentPage,3);
    }
    //下一页
    function netPage() {
        var totalPage = Math.ceil(totalCount/3);
        console.log("totalPage:"+totalPage);
        if(currentPage >=totalPage){
            return;
        }
        currentPage = currentPage+1;
        findSuit(currentPage,3);
    }
</script>
<script>
    var userId = sessionStorage.getItem("userId");
    if(userId == null || userId == undefined || userId == ''){
        userId = getUuid();
        sessionStorage.setItem("userId",userId);
    }


    function getUuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";

        var uuid = s.join("");
        return uuid;
    }
</script>

<script>
    //在线客服 开始
    var ws = new WebSocket("ws://127.0.0.1:8080/api/clientSocket");
    var mesage = {
        userId:userId,
        text:'',
        type:0,
        destinationId:''
    }
    ws.onopen = function(evt) {  //绑定连接事件
        console.log("Connection open ...");
        var messageJson = JSON.stringify(mesage);
        console.log(messageJson)
        ws.send(messageJson);
    };

    ws.onmessage = function(evt) {//绑定收到消息事件
        console.log( "Received Message: " + evt.data);
        var data = JSON.parse(evt.data);
        $(".chatBox-content-demo").append(" <div class=\"clearfloat\">\n" +
            "                            <div class=\"author-name\">\n" +
            "                                <small class=\"chat-date\">"+data.dateTime+"</small>\n" +
            "                            </div>\n" +
            "                            <div class=\"left\">\n" +
            "                                <div class=\"chat-avatars\"><img src=\"img/userImage.jpg\" alt=\"头像\"/></div>\n" +
            "                                <div class=\"chat-message\">\n" +
            data.text +
            "                                </div>\n" +
            "                            </div>\n" +
            "                        </div>");

        if(data.userId !=undefined && data.userId !=null && data.userId !=''){
            mesage.destinationId = data.userId;
        }
    };

    ws.onclose = function(evt) { //绑定关闭或断开连接事件
        console.log("Connection closed.");
    };
    //发送socket消息
    function sendMessage(content){
        if(content !=''){
            mesage.text = content;
        }
        var messageJson = JSON.stringify(mesage);
        ws.send(messageJson);
    }

    //在线客服 结束


    //获取婚纱套系
    function getWeddingDress() {
        $.ajax({
            url:httpUrl+'/api/getWeddingDress',
            type:'get',
            success:function (res) {
                console.log(res);
                var html = template('wedding_dress', {data:res.data});
                document.querySelector('#wedding_dress_l').innerHTML = html
            }
        });
    }
    
    //获取金牌团队信息
    function getTeam() {
        $.ajax({
            url:httpUrl+'/api/getTeam',
            type:'get',
            success:function (res) {
                console.log(res);
                var html = template('team_script', {data:res.data});
                document.querySelector('#team').innerHTML = html
            }
        });
    }
    //获取作品
    function getWorkShow() {
        $.ajax({
            url:httpUrl+'/api/getWorkShow',
            type:'get',
            success:function (res) {
                console.log(res);
                var html = template('work_show_script', {data:res.data});
                document.querySelector('#work_show').innerHTML = html
            }
        });
    }
</script>
<script type="text/javascript" src="assets/js/zySearch.js"></script>
<script type="text/javascript">

    $("#zySearch").zySearch({
        "width":"355",
        "height":"33",
        "parentClass":"pageTitle",
        "callback":function(keyword){
            console.info("搜索的关键字");
            contentKeyword = keyword;
            console.info(keyword);
            findSuit(1,3);
        }
    });

</script>

</html>